import React, { useState, useMemo, ChangeEvent } from 'react'
import { PageProps } from "@/interfaces/app.interface"
import { regxSPhone } from '@/utils/regexp.func'
import { Checkbox } from 'antd';
import ls from '@/utils/ls.func'
import {login, sendCode} from '@/api'
import style from './index.less'
let userObj = ls.getItem('user') || {}
const loginPage = (prop: {cb: Function}) => {
  
    let [status, setStatus] = useState(0)
    let [user, setUser] = useState(userObj.user || '')
    let [pass, setPass] = useState(userObj.pass || '')
    let [code, setCode] = useState('')
    let [errmsg, setErrmsg] = useState('')
    let [sendmsg, setSendmsg] = useState('发送验证码')
    let [issend, setIssend] = useState(false)
    let [type, setType] = useState('')
    let mark = useMemo(() => {
        return user && (pass || code) && !type
    }, [type, user, pass, code])
    const tab = (num: number) => () => {
        if (num === 0) {
            setCode('')
        } else {
            setPass('')
        }
        setType('')
        setStatus(num)
    }

    const blur = (num: number) => (e: ChangeEvent<HTMLInputElement>) => {
        let { value } = e.target
        if (num === 0) {
            if (!regxSPhone.test(value)) {
                setErrmsg('请输入正确的手机号')
                setType('user')
            } 
        }
    }

    const change = (num: number) => (e: ChangeEvent<HTMLInputElement>) => {
        let { value } = e.target
        if (num === 0) {
            setUser(value)
        } else if (num === 1) {
            setPass(value)
        } else {
            setCode(value)
        }
        setType('')
    }
    // 发送验证码
    const send = () => {
        if (issend) return
        if (!user || !regxSPhone.test(user)) {
            setErrmsg('请输入正确的手机号')
            setType('user')
            return
        }
        setIssend(true)
        sendCode({mobile: user, type: 1}).catch(err => {
            setErrmsg(err)
            setType('user')
        })
        let time = 60
        setSendmsg(`正在发送中 ${time} s`)
        let timer = setInterval(() => {
            if (time > 1) {
                time--;
                setSendmsg(`正在发送中 ${time} s`)
            } else {
                clearInterval(timer);
                setSendmsg(`发送验证码`)
                setIssend(false)
            }
        }, 1000);

    }
    // 登录
    const submit = () => {
        if (mark) {
            let json: obj = {mobile: user}
            if (status == 0) {
                json.passWord = pass
            } else {
                json.verificationCode = code
            }

            login(json).then(res => {
                // if (check) {
                //     ls.setItem('user',  {user, pass})
                // } else {
                //     ls.removeItem('user')
                // }
                ls.setItem('user', res)
                prop.cb('success')
            })
        }
    }

    if (userObj.user) {
        // submit()
    }

    const link = (type: string) => () => prop.cb(type)

    return <div className={style.wrap} >
        <div className={style.login}>
        <div className={style.cls} onClick={link('')}>&times;</div>
            <div className={`${style.tabs} flex-start`}>
                <div className={status == 0 ? style.on : ''} onClick={tab(0)}>密码登录</div>
                <div className={status == 1 ? style.on : ''} onClick={tab(1)}>短信登录</div>
            </div>

            <div className={style.form}>
                <div className={`flex-start ${style.error}`} hidden={!type}>
                    <img src={require('@/assets/img/warn.png')} alt="" />
                    <div>{errmsg}</div>
                </div>
                <div className={style.input}>
                    <input type="text" maxLength={11} value={user} className={type == 'user' ? style.err : ''} placeholder="手机号" onChange={change(0)} onBlur={blur(0)} />
                </div>

                {
                    status == 0
                        ? <div className={style.input}>
                            <input type="password" value={pass} className={type == 'pass' ? style.err : ''} placeholder="密码" onChange={change(1)} onBlur={blur(1)} />
                        </div>
                        : <div className={`${style.input} flex`} key="code">
                            <input type="text" maxLength={6} className={style.code} placeholder="验证码" onChange={change(2)} onBlur={blur(2)} />
                            <div className={`${style.send} ${issend ? style.none : ''}`} onClick={send}>{sendmsg}</div>
                        </div>
                }


                <div className={`${style.submit} ${mark ? style.on : ''} `} onClick={submit}>登录</div>

                {/* <div className="flex"> */}
                    {/* <Checkbox onChange={e => setCheck(e.target.checked)}>下次自动登录</Checkbox> */}
                    <div className={`flex ${style.gray}`}>
                        <div className={style.cur} onClick={link('forget')}>忘记密码</div>
                        {/* <div className={style.line}>|</div> */}
                        <div className={style.cur} onClick={link('register')}>注册</div>
                    </div>
                {/* </div> */}

                <div className={style.wx}>
                    <div className={style.name}>微信登录</div>
                    <img src={require('@/assets/img/login/wx.png')} alt="" />
                </div>
            </div>

        </div>
    </div>
}


export default loginPage